<template>
    <f7-page>
        <f7-navbar title="车辆详情" back-link="返回">
            <f7-nav-right>地图</f7-nav-right>
        </f7-navbar>


            <div class="bg-personpage">
                <div class="text-align-center">
                      <f7-link @click="$f7router.navigate('/relationDrDtl/'+userMg.user_id)">
                                <img  class="companyhome-icon gap-20" src="../../assets/img/infor-face.png">
                     </f7-link>
                        <h3 class="text-black">{{userMg.real_name}}-司机</h3>

                         <h4 class="text-gray gap-10 line-height">
                                <span>共运输货物 {{userMg.order_count}} 单</span>
                        </h4>
                </div>

                <div class="bg-companynpage">
                        <div class="row row-homepage text-align-center text-gray gap-20" >
                                <div class="col">
                                    <h4 class="text-blue">车牌号</h4>
                                    <h4 class="gap-5 ng-binding text-blue">{{userMg.truck_num}}</h4>
                                </div>
                                <div class="col">
                                    <h4>载重</h4>
                                    <h4 class="gap-5 ng-binding">{{userMg.truck_weight}}吨</h4>
                                </div>

                                <div class="col">
                                    <h4>线路</h4>
                                    <h4 class="gap-5 ng-binding">{{userMg.line_count}}条</h4>
                                </div>
                            </div>
                </div>
       </div>
       
       <f7-block v-if="goodsMg">
            <f7-col>
                <div>
                    <div v-for="item in goodsMg.product_categories">
                        <div class="row-wrap">
                            <h3 class="classification">运输货物<span class="float-right text-gray s_unit">单位：{{item.pass_unit}}</span></h3>
                            <h4 class="classification gap-10">
                                <img src='../../assets/img/label-goodsicon.png' class="label-icon-trade">{{item.layer_1_chn}} {{item.layer_2_chn}}
                            </h4>
                            <div v-for="item1,index in item.product_name">
                                <div class="item-add">
                                    <h5 class="bold text-green">{{item1.name}}</h5>
                                    <span v-for="item2 in item1.attribute">
                                {{item2.name}}:{{item2.value}}{{item2.unit}}
                            </span>
                                </div>
                                <div class="Add_subtract" >
                                    <span class="classification">给司机分配吨数</span>
                                    <span class="float-right">
                                       <span class="num" @click="changeNum('sub',index)">-</span>
                                        <input type="number" class="number_err"  v-model="item1.number"/>
                                        <span  class="num" @click="changeNum('add',index)">+</span>
                              </span>
                                </div>
                            </div>
                        </div>
                        <p class="gap-10 text-gray left_information">信息费为 {{goodsMg.tip_price}} 元/车，本次指派 {{goodsMg.amount}} 吨</p>
                    </div>
                </div>
            </f7-col>
        </f7-block>
        <f7-block v-if="errMg.msg=='司机需求单没找到'||errMg.msg=='没有可指派的产品'">
            <div style="text-align: center">
                暂无产品
            </div>
        </f7-block>
    
     <f7-toolbar>
            <div class="row button-foot">
                <div class="col col-33">
                    <f7-link>打电话</f7-link>
                </div>
                <div class="col col-33" v-if="goodsMg">
                    <f7-link @click="phOpenBtn()" class="text-blue">代接单</f7-link>
                </div>
                <div class="col col-33">
                    <f7-link class="text-red">
                       替换
                    </f7-link>
                </div>
            </div>
        </f7-toolbar>
       <f7-popover :opened="pop" class="popover" v-if="goodsMg">
            <div>
                <div>
                    <h4>提示</h4>
                    <div v-if="userMg.truck_weight-goodsMg.amount != 0" class="popup-body">
                        指派的重量与该车实际重量<span v-if="userMg.truck_weight-goodsMg.amount>0">还差</span><span v-if="userMg.truck_weight-goodsMg.amount<0">超出</span>
                        {{Math.abs(userMg.truck_weight-goodsMg.amount)}}吨，是否派货？
                    </div>
                    <div v-if="userMg.truck_weight-goodsMg.amount == 0">
                        是否接单
                    </div>
                </div>

                <f7-link @click="phChangeBtn()">确定</f7-link>
                <f7-link @click="phCloseBtn()">关闭</f7-link>
            </div>
        </f7-popover>
    </f7-page>
</template>

<script>
    import F7Page from "framework7-vue/src/components/page";
    import F7Link from "framework7-vue/src/components/link";
    import F7Popover from "framework7-vue/src/components/popover";
    import F7Block from "framework7-vue/src/components/block";
    export default {
        name: "dirverDetail",
        components: {F7Block, F7Popover, F7Link, F7Page},
        data(){
            return{
                allTip:0,
                amount:0,
                bigNub:[],
                userMg:'',
                goodsMg:'',
                errMg:'',
                pop:false,
                changeMg:{
                    amount:0,
                    demand_id:'',
                    product_categories:{},
                    scene:'',
                    tip_prices:0,
                    user_supply_id:''
                }
            }
        },
        methods:{
            async dirverDetail(){
                let param = {user_id: this.$f7Route.params.userId,order_id:this.$f7Route.params.orderId,scene:'assign'}
                this.userMg = (await this.LineService.dirverDtl(param)).data.data
            },
            async goodsDetail(){
                let param = {demand_id:this.$f7Route.params.orderId,weight:this.$f7Route.params.weight}
                this.goodsMg = (await this.LineService.dirverGoodsDtl(param)).data.data
                this.errMg = (await this.LineService.dirverGoodsDtl(param)).data
                if(this.goodsMg){
                    this.goodsMg.product_categories[0].product_name.forEach( (item)=> {
                        this.bigNub.push(item.number)
                    })
                }
            },
            phOpenBtn(){
                this.pop=true
            },
            phCloseBtn(){
                this.pop=false
            },
            async phChangeBtn(){
                let param = {
                    amount:this.goodsMg.amount,
                    demand_id:this.$f7Route.params.orderId,
                    product_categories:this.goodsMg.product_categories,
                    scene:"assign",
                    tip_prices:this.allTip,
                    user_supply_id:this.$f7Route.params.userId
                }
                this.changeMg = (await this.LineService.priceCanOrder(param)).data.data
                this.goBack({ force: true, ignoreCache: true })
                this.pop=false
            },

            //加减
            changeNum(type,index){
                if(type=='sub'){
                    if(this.goodsMg.product_categories[0].product_name[index].number>0){
                        this.goodsMg.product_categories[0].product_name[index].number--

                    }
                }else {
                    if(this.goodsMg.product_categories[0].product_name[index].number<this.bigNub[index]){
                        this.goodsMg.product_categories[0].product_name[index].number++
                    }
                }
                this.goodsMg.product_categories[0].product_name[index].amount=this.goodsMg.product_categories[0].product_name[index].number*this.goodsMg.product_categories[0].product_name[index].measure_unit

                let sum = 0;
                this.goodsMg.product_categories[0].product_name.forEach( (item)=> {
                    sum+=item.amount
                })
                this.goodsMg.amount=sum
                this.amount=sum

            }
        },
        mounted(){
            this.dirverDetail()
            this.goodsDetail()

        },
        watch:{
            amount(val){
                this.allTip=Math.ceil((val/this.userMg.truck_weight))*this.goodsMg.tip_price
            }
        }
    }
</script>

<style scoped>
.ios .page {
    background: #f5f5f5;
  }
.gap-20 {
    margin-top: 20px;
}
.gap-10 {
    margin-top: 10px;
}
.gap-5{
    margin-top: 5px;
}
.companyhome-icon {
    border: 2px solid #fff;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
}
.text-gray {
    color: #999;
}
.text-blue {
    color: #3c35fe;
}
.ios .toolbar a.link {
    height: 44px;
    font-size: 14px;
    color: #999;
}
.button-foot{
  width: 100%;
  background: white;
}
.button-foot .col-33 {
    width: 33.333333333333%  !important;
  align-items: center;
  justify-content: center;
  color: #666;
  text-align: center;
}
.button-foot .text-red {
    color: #db4226  !important;
}
.button-foot .text-blue {
    color: #2a68f4  !important;
}

.ios .block{
    margin:20px 0px 0px 0px;
    padding: 15px 0px ;
    background: #fff;
}
.row-wrap{
    padding-left: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
}
.classification{
    color: #333;
    font-size: 14px;
}
.label-icon-trade{
    width: 32px;
    height: 16px;
    margin-right: 18px;
    margin-top: 2px;
    float: left;
}
.item-add{
    background: #f8fff0;
    padding: 4px 10px;
    margin: 10px 0px;
    border-left: 1px solid green;
}
.item-add h5{
    margin: 5px 0px;
}
.text-green{
    color: rgb(51, 140, 37);
}
.bold {
    font-weight: bold;
    font-size: 14px;
}
.item-add span{
    width: 50%;
    color: rgb(51, 140, 37);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight:initial;
    display: inline-block;
}
.s_unit{
    font-size: 12px;
    margin-right: 10px;
}
.left_information{
    margin-left: 15px;
     font-size: 12px;
}
.Add_subtract{
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-top: 5px;
}
.Add_subtract .num{
    background: #f4f4f4 !important;
    font-size: 14px;
    margin: 0px 5px;
    color: #333;
    height: 25px;
    line-height: 24px;
    width: 25px;
    display: inline-block;
    text-align: center;
    border-radius: 0px !important;
}
.Add_subtract .number_err {
    width: 60px !important;
    background: #f4f4f4;
    height: 27px;
    line-height: 28px;
    border-radius: 2px;
    margin: 0 5px;
    text-align: center;
    display: inline-block;
}



    .popover{
        width:80%;
        margin-left: 10%;
        height: auto;
        position: fixed;
        top:30%;
    }
    .popover h4{
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        border-bottom: 1px silver solid;
        line-height: 40px;
    }
    .popover input{
        font-size: 18px;
        border: 1px silver solid;
        text-align: center;
        height: 40px;
        width:300px;
        margin: 20px auto;
    }
    .popover a{
        color: #333;
        width: 50%;
        text-align: center;
        font-size: 24px;
        border-top: 1px silver solid;
        font-size: 14px;
        line-height: 44px;
    }
.popup-body{
        padding: 10px;
    overflow: auto;
}
</style>